<template>
  <div class="bg-white shadow rounded-lg p-6" v-if="mainData">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-xl font-bold">{{ title }}</h2>
    </div>

    <slot name="header-fields"></slot>

    <TableSection v-if="items" :title="''" :items="items" :columns="itemColumns" @add="$emit('add')"
      @delete="$emit('delete', $event)" />
  </div>
</template>

<script setup>
defineProps({
  title: String,
  mainData: Object,
  items: Array,
  itemColumns: Array
})

defineEmits(['add', 'delete'])
</script>